<template>
    <div class="manage">
        <div class="manage-a" v-if="!showScreen">
            <!-- 园区门票 -->
            <Tickets></Tickets>
            <!-- 图表 -->
            <charts-count></charts-count>
        </div>
        <div class="manage-b" v-if="showScreen">
            <!-- 第二屏信息 -->
            <manage-b></manage-b>
        </div>
        <div class="cutover-btn" @click="showToScreen"></div>

        <!-- 点位选择器 -->
        <all-marker ref="allMarker" :map-data="mapData"></all-marker>
    </div>
</template>

<script>
    import AllMarker from "./mapMarker/allMarker.vue";
    import Tickets from "./Tickets";
    import chartsCount from "./chartsCount";
    import manageB from "./manageB";


    import {stadium} from '../../axios/manage/index'

    export default {
        name: "manage",
        components: {
            AllMarker,
            Tickets,
            chartsCount,
            manageB
        },
        props: {
            mapData: Object
        },
        data() {
            return {
                selectMenu: [
                    {
                        id: '1',
                        name: '酒店',
                        imgUrl: require('../../assets/manage/icon-a.png')
                    }
                ],
                selectArr: [
                    {
                        id: 1,
                        name: '酒店',
                        imgUrl: require('../../assets/manage/icon-a.png')
                    }
                ],
                showScreen: false
            }
        },
        mounted() {
            this.getStadium()
        },
        methods: {
            /*
            * 显示隐藏首屏
            * */
            showToScreen() {
                this.showScreen = !this.showScreen
            },
            /**
             * 酒店点位
             */
            getStadium() {
                stadium().then(res => {
                    setTimeout(() => {
                        this.markerData = res.data
                        this.$refs.allMarker.setAllMarker(this.markerData, this.mapData)
                    }, 500)
                })
            }

        }
    }
</script>

<style scoped lang="scss">
    .manage {
        position: relative;

        .cutover-btn {
            width: 56px;
            height: 56px;
            position: fixed;
            right: 17px;
            top: 50%;
            transform: translateY(-50%);
            background-image: url("../../static/img/common/hideImg.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .cutover-btn:hover {
            cursor: pointer;
        }

        .manage-a, .manage-b {
            /*position: absolute;*/
        }

    }
</style>